<template>
  <router-view>
    <el-container class="full-page">
      <!-- 左侧图片 -->
      <el-aside class="image-container">
        <img
            src="@/assets/IMG_20241029_215053.png"
            alt="侧边栏背景"
            class="responsive-image"
        >
      </el-aside>

      <!-- 右侧登录框 -->
      <el-main class="login-container">
        <div class="info-box">
          <h2>登录</h2>
          <form @submit.prevent="handleLogin">
            <input type="text" placeholder="请输入用户名" v-model="username"/>
            <input type="password" placeholder="请输入密码" v-model="password"/>

            <!-- 右对齐的忘记密码 -->
            <div class="forgot-password">
              <a href="#" @click.prevent="handleForgotPassword">忘记密码？</a>
            </div>

            <button type="submit">登录</button>
          </form>
          <button class="guest-login" @click="handleGuestLogin">游客登录</button>
        </div>
      </el-main>
    </el-container>
  </router-view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    handleLogin() {
      if (!this.username || !this.password) {
        alert('请输入用户名和密码');
        return;
      }
      fetch('/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({username: this.username, password: this.password}),
      })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              alert('登录成功！');
              sessionStorage.setItem('user', JSON.stringify(data.user));
              this.$router.push('/index');
            } else if (data.message === '用户不存在') {
              const userWantsToRegister = confirm('用户不存在，是否使用当前信息立即注册？');
              if (userWantsToRegister) {
                this.handleRegister(this.username, this.password);
              }
            } else {
              alert(data.message || '登录失败，请重试。');
            }
          })
          .catch(error => {
            console.error('Error:', error);
            alert('发生错误，请稍后再试。');
          });
    },

    /** 新增的注册方法 */
    handleRegister(username, password) {
      fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: username, password: password }),
      })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              alert('注册成功！');
              sessionStorage.setItem('user', JSON.stringify(data.user));
              this.$router.push('/index');
            } else {
              alert(data.message || '注册失败，请重试。');
            }
          })
          .catch(error => {
            console.error('Error:', error);
            alert('发生错误，请稍后再试。');
          });
    },

    /** 🔥 简化后的游客登录逻辑 */
    handleGuestLogin() {
      // 直接跳转到首页
      this.$router.push('/index');
      
      // 如果需要模拟游客登录状态，可以添加以下代码
      sessionStorage.setItem('user', JSON.stringify({
        id: 'guest',
        username: '游客',
        isGuest: true
      }));
    },

    /** 忘记密码(待开发) */
    handleForgotPassword() {
      alert('忘记密码？');
    },
  }
};
</script>

<style scoped>
/* 🌟 让整个页面填满屏幕，不出现滚动条 */
.full-page {
  height: 100vh;
  width: 100vw; /* 新增宽度限制 */
  display: flex;
  position: fixed; /* 关键：固定定位防止滚动 */
  top: 0;
  left: 0;
  overflow: hidden;
}

/* 🎨 侧边图片区域 */
.image-container {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

.responsive-image {
  width: 100%;
  height: 100vh;
  object-fit: cover; /* 关键：保持图片比例填充 */
}

/* 🎨 登录框区域 */
.login-container {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  overflow: hidden;
}

/* 💡 登录框样式 */
.info-box {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 400px;
  max-height: 500px;
  text-align: center;
}

/* 输入框样式 */
.info-box input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* 💡 忘记密码靠右 */
.forgot-password {
  text-align: right;
  margin-bottom: 10px;
}

.forgot-password a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

/* 按钮样式 */
.info-box button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}

.guest-login {
  background: #67C23A;
}

.register {
  background: #E6A23C;
}
</style>
